<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>建筑物2.5D数据加载显示</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [108.643708, 31.96478, 500], //相机的位置
        lookAt: [108.643708, 31.96478, 0], //相机看向的地图位置
        // position: [108.069938, 30.342828, 100], //相机的位置
        // lookAt: [108.069938, 30.342828, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 22, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        background: "None", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        shapeMinLevel: 13, //shape数据从这个图层开始出现
        // floorDivisionCount: 1, //shape建筑楼层颜色分层的最大数量, 这个值越大，GPU消耗的内存就会越大。所以这个值根据实际需要填写，不要过大。
        // buildingColor: '#DC143C',
        baseLayer: [
            //                           //影像底图
            {
                url: 'http://192.168.88.10:49999/t/HMapServer/rest/wmts/zjlx/{z}/{x}/{y}.png',
                urlDecimal: true,      // 请求参数zyx，是否为十进制，或十六进制      
                tileType: 'image',
                canNotSelect: false, // true表示该图层不参与射线拾取，false表示图层参与射线拾取
                maxDataLevel: 16,
                wmsUrlDecimal: true,
            },

            // {
            //     name: 'buildingLayer',
            //     // url: 'http://192.168.88.10:49999/output-bulidling/L{z}/{y}/{x}.shp', //shape底图的url
            //     url: 'http://localhost:9000/examples/resources/shp/output-bulidling/L{z}/{y}/{x}.shp',
            //     urlDecimal: true, //shape底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'shape',  //shape底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            //     merge: true //几何体是否合并
            // }
            
  
            {
                name: 'buildingLayer',
                // url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/ShpCLipper/L{z}/{y}/{x}.shp', //shape底图的url
                url: 'http://localhost:9000/examples/resources/shp/output-bulidling/L{z}/{y}/{x}.shp',
                urlDecimal: true, //shape底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'shape',  //shape底图
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                merge: true, //几何体是否合并
            }
        ]
    });

   


</script>
<script type="module">
    import { GUI } from "/lil-gui.module.min.js";
    const gui = new GUI();
    gui.add(window.app.light.ambientLight, 'intensity').min(0).max(20).step(0.01).name('环境光');
    gui.add(window.app.light.light1, 'intensity').min(0).max(20).step(0.01).name('直射光');
</script>

</html>